<style lang="scss">
.z-person-select-dialog {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__footer {
    text-align: center;
  }
}

</style>

<template>
  <div class="z-person-select">
    <el-button type="text" @click="dialogVisible = true">公开</el-button>

    <el-dialog
        class="z-person-select-dialog"
        title="提示"
        :visible.sync="dialogVisible"
        width="700px"
        append-to-body
    >
      <div>
        <z-directory-select
            ref="select"
            :data="testData"></z-directory-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="createShare">选择</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: 'ZPersonSelectDialog',
  components: {},
  props: {
    value: null
  },
  data() {
    return {
      dialogVisible: false,
      testData:  {
        label: 'xxx科技有有限公司',
        id: ZY.rid(),
        children: [
          {
            label: '产品研发部',
            id: ZY.rid(),
            children: [{
              label: '研发-前端',
              id: ZY.rid(),
            }, {
              label: '研发-后端',
              id: ZY.rid(),
            }, {
              label: 'UI 设计',
              id: ZY.rid(),
            }]
          },
          {
            label: '销售部',
            id: ZY.rid(),
            children: [{
              label: '销售一部',
              id: ZY.rid(),
            },{
              label: '销售二部',
              id: ZY.rid(),
            }
            ]
          },
          {
            label: '财务部',
            id: ZY.rid(),
          }
        ]
      }
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    createShare() {
      // this.$emit('input', this.$refs.select)
      // console.log(this.$refs.select.curSelectArr())
      let arr = this.$refs.select.curSelectArr()
      this.$emit('input', arr.map(v => {
        return {
          label: v.label,
          value: v.id
        }
      }))
      this.dialogVisible = false;
    }
  }
};
</script>
